<template>
    <van-sticky>
        <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>

    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in detailInfo.pics" :key="image">
            <img :src="image.pics_mid" width="100%" height="180px" />
        </van-swipe-item>
    </van-swipe>

    <div v-html="detailInfo.goods_introduce"></div>

    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon icon="cart-o" text="购物车" @click="gwc" :badge="allCount" />
        <van-action-bar-icon icon="shop-o" text="店铺" />
        <van-action-bar-button type="warning" @click="jiaru" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>

</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute();
const onClickLeft = () => history.back();
import { useCartStore } from '../store'
import { storeToRefs } from 'pinia'
import axios from "axios";
const { allCount } =  storeToRefs(useCartStore()) 
const { ADD_CAER_ITEM } = useCartStore()

const detailInfo = ref([]);
axios.get("https://api-hmugo-web.itheima.net/api/public/v1/goods/detail", {
    params: {
        goods_id: route.query.goods_id
    }
}).then(res => {
    detailInfo.value = res.data.message
})

const jiaru = () => {
    ADD_CAER_ITEM({
        check: true,
        num: 1,
        ...detailInfo.value
    })
}

const gwc = () => {
    router.push('/Cart')
}
</script>

<style lang="scss" scoped></style>